<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width,initial-scale=1'>
<style>.spinner {
	position:fixed;
	display:none;
	width:55px;
	height:55px;
	top:calc(50% - 25px);
	left:calc(50% - 25px);
	background-color:#2ECC71;
	border-radius:100%;
	-webkit-animation:sk-scaleout 0.8s infinite ease-in-out;
	animation:sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
	0% {
		-webkit-transform:scale(0)
	}
	100% {
		-webkit-transform:scale(1.0);
		opacity:0;
	}
}
@keyframes sk-scaleout {
	0% {
		-webkit-transform:scale(0);
		transform:scale(0);
	}
	100% {
		-webkit-transform:scale(1.0);
		transform:scale(1.0);
		opacity:0;
	}
}
body {
	color:#434343;
	font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size:14px;
	line-height:1.42857142857143;
	padding:20px
}
a {
	text-decoration:none;
	color:#434343
}
.container {
	margin:0 auto;
	max-width:350px
}
#field-group {
	opacity:0;
	transition:opacity 0.5s,top 0.5s;
	box-sizing:border-box;
	clear:both;
	padding:4px 0;
	position:relative;
	top:0px;
	margin:0 auto;
	padding:0 20px;
	width:100%
}
#field-group>label {
	color:#757575;
	display:block;
	margin:0 0 5px 0;
	padding:5px 0 0;
	position:relative;
	word-wrap:break-word
}
input[type=text] {
	background:#fff;
	border:1px solid #d0d0d0;
	border-radius:2px;
	box-sizing:border-box;
	color:#434343;
	font-family:inherit;
	font-size:inherit;
	height:2.5em;
	line-height:1.4285714285714;
	padding:4px 5px;
	margin:0;
	width:100%
}
@media all and(orientation:portrait) {
	.container {
		padding-top:0px
	}
}
input[type=text]:focus {
	border-color:#2ECC71;
	outline:0
}
.button-container {
	box-sizing:border-box;
	clear:both;
	margin:-20px 0 0;
	padding:4px 0;
	position:relative;
	width:100%;
	text-align:center
}
button {
	outline:none;
	box-sizing:border-box;
	background:#f5f5f5;
	border:1px solid#bdbdbd;
	border-radius:18px;
	color:#434343;
	cursor:pointer;
	display:block;
	font-family:inherit;
	font-size:16px;
	font-variant:normal;
	font-weight:400;
	height:2.14285714em;
	line-height:1.42857143;
	margin:18px auto;
	padding:4px 30px;
	text-decoration:none;
	vertical-align:baseline;
	white-space:nowrap
}
#sub {
	transition:top 0.5s,opacity 0.5s;
	position:relative;
	top:-10px;
	opacity:0
}
#right-div {
	position:fixed;
	bottom:3%;
	left:calc(50% - 100px);
	width:200px;
	font-size:12px;
	line-height:1;
	color:#999
}
.right {
	text-align:center
}
@media(max-height:400px) {
	#right-div {
		display:none
	}
}
#ssid-list {
	border:1px solid #d0d0d0;
	border-radius:5px;
	width:100%
}
#ssid-list>li {
	height:22px;
	line-height:22px;
	transition:height 0.5s, background 0.2s;
	position:relative;
	cursor:pointer;
	color:#434343;
	display:block;
	padding:8px 15px;
	border-top:1px solid#d0d0d0
}
#ssid-list-ani {
	animation:ssid-list-ani 0.5s;
	-moz-animation:ssid-list-ani 0.5s;
	-webkit-animation:ssid-list-ani 0.5s;
}
#ssid-list-li-ani {
	animation:ssid-list-li-ani 0.5s;
	-moz-animation:ssid-list-li-ani 0.5s;
	-webkit-animation:ssid-list-li-ani 0.5s;
}
@keyframes ssid-list-ani {
	0% {
		opacity:0
	}
	100% {
		opacity:1
	}
}
@keyframes ssid-list-li-ani {
	0% {
		height:30
	}
	100% {
		height:22
	}
}
#ssid-list>li:first-child {
	border-top:0;
	border-top-left-radius:5px;
	border-top-right-radius:5px
}
#ssid-list>li:last-child {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px
}
#ssid-list>li:hover {
	background:#f5f5f5
}
.encrytype {
	color:#999;
	display:inline-block;
	z-index:1;
	position:absolute;
	right:15px
}
#passwordDIV {
	width:100%;
	height:0px;
	background:#f5f5f5
}
#connecting {
	display:none;
	position:fixed;
	left:0;
	top:0;
	z-index:-1;
	width:100%;
	height:100%;
	background:#fff;
}
#connect-state {
	font-size:40px;
	margin-top:10%;
	text-align:center;
}
</style>
</head>
<body>
	<div id='connecting'>
		<p id='connect-state'>&#x6B63;&#x5728;&#x8FDE;&#x63A5;</p>
	</div>
	<div class='spinner' id='load'>
		
	</div>
	<div class='container'>
		<h1 style='text-align:center;font-size:40px;'>WiFi&#x914D;&#x7F6E;</h1>
		<div class='button-container'>
			<button onclick="scan()" id='scan-btn'>&#x626B;&#x63CF;&#x70ED;&#x70B9;</button>
			<span style='color:#999'>&#x4EC5;&#x652F;&#x6301;2.4G</span>
		</div>
		<div id='ssid-list' style='display: none;'>
	
		</div>
	</div>
</body>
<script>
var scanState = 0;
function getid(id) {
	return document.getElementById(id);
};
function scan() {
	getid('ssid-list').className='';
	getid('load').style.display='block';
	getid('ssid-list').innerHTML = '';
	getid('ssid-list').style.display='none';
	if(scanState == 1) {
		return;
	}else {
		scanState = 1;
		getid('scan-btn').style.borderColor='#2ECC71';
		getid('scan-btn').style.color='#888';
		getid('scan-btn').innerHTML='&#x6B63;&#x5728;&#x626B;&#x63CF;';
		var xmlhttp=new XMLHttpRequest();
		var requestString='./wifiscan';
		xmlhttp.onreadystatechange=function() {
			if(xmlhttp.readyState==4&&xmlhttp.status==200) {
				getid('load').style.display='none';
				getid('scan-btn').style.borderColor='#bdbdbd';
				getid('scan-btn').style.color='#434343';
				getid('scan-btn').innerHTML='&#x91CD;&#x65B0;&#x626B;&#x63CF;';
				getid('ssid-list').style.display='block';
				getid('ssid-list').classList.add('ssid-list-ani');
				var req=xmlhttp.responseText;
				req=JSON.parse(req);
				for(var i=0;i<req.req.length;i++) {
					var para=document.createElement('li');
					para.setAttribute('onclick',"ssidFocus('ssid_name"+i+"')");
					para.id='ssid'+i;
					para.innerHTML="<span class='encrytype'>"+req.req[i].encryptionType+'</span>'+"<span id='ssid_name"+i+"'>"+req.req[i].ssid+'</span>';
					var node=document.createTextNode('');
					var ssidElement=getid('ssid-list');
					ssidElement.appendChild(para);
				};
				req='';
				scanState=0;
			};
		};
		xmlhttp.open('GET',requestString,true);
		xmlhttp.send(null);
	};
};
var lastSSID='';
function ssidFocus(num) {
	var ssidElement=document.getElementById(num);
	var passs=prompt(ssidElement.innerText);
	if((passs!=null)&&(passs!='')) {
		getid('connecting').style.display='block';
		getid('connecting').style.zIndex='2';
		getid('load').style.display='block';
		getid('load').style.zIndex='3';
		var xmlhttp=new XMLHttpRequest();
		var requestString='./wificonfig?ssid='+ssidElement.innerHTML+'&password='+passs;
		xmlhttp.onreadystatechange=function() {
			if(xmlhttp.readyState==4&&xmlhttp.status==200) {
				var req=xmlhttp.responseText;
				if(req=='1') {
					getid('connecting').innerHTML='&#x8FDE;&#x63A5;&#x6210;&#x529F;<br>&#x70ED;&#x70B9;&#x5373;&#x5C06;&#x5173;&#x95ED'
				}
				else {
					getid('connecting').innerHTML='&#x8FDE;&#x63A5;&#x5931;&#x8D25;'
				}
				getid('load').style.zIndex='-1';
				getid('load').style.display='none'
			}
		}
	};
	xmlhttp.open('GET',requestString,true);
	xmlhttp.send(null);
	lastSSID=num
};
</script>
</html>